<template>
	<view class="page-container">
		<!-- 页面标题 -->
		<view class="page-header">
			<view class="header-content">
				<view class="header-icon">➕</view>
				<view class="header-text">
					<text class="header-title">添加学生</text>
					<text class="header-subtitle">绑定新的学生信息</text>
				</view>
			</view>
		</view>

		<!-- 表单卡片 -->
		<view class="form-container">
			<view class="form-card">
				<view class="form-header">
					<up-icon name="edit-pen" color="#6FD719" size="20"></up-icon>
					<text class="form-title">学生信息</text>
				</view>

				<up-form labelPosition="left" :model="form" :rules="rules" ref="form1" labelWidth="120">
					<view class="form-section">
						<text class="section-title">基本信息</text>

						<up-form-item label="学校" prop="schoolName" borderBottom @click="handlerShowSchool" ref="schoolName">
							<up-input
								v-model="form.schoolName"
								disabled
								disabledColor="#ffffff"
								placeholder="请选择学校"
								border="none"
								customStyle="color: #333; font-size: 30rpx;"
							></up-input>
							<template #right>
								<up-icon name="arrow-right" color="#999"></up-icon>
							</template>
						</up-form-item>

						<up-form-item label="年级" prop="gradeName" borderBottom @click="data.showGrad = true" ref="gradeName">
							<up-input
								v-model="form.gradeName"
								disabled
								disabledColor="#ffffff"
								placeholder="请选择年级"
								border="none"
								customStyle="color: #333; font-size: 30rpx;"
							></up-input>
							<template #right>
								<up-icon name="arrow-right" color="#999"></up-icon>
							</template>
						</up-form-item>

						<up-form-item label="班级" prop="classesName" borderBottom @click="data.showClasses = true" ref="classesName">
							<up-input
								v-model="form.classesName"
								disabled
								disabledColor="#ffffff"
								placeholder="请选择班级"
								border="none"
								customStyle="color: #333; font-size: 30rpx;"
							></up-input>
							<template #right>
								<up-icon name="arrow-right" color="#999"></up-icon>
							</template>
						</up-form-item>
					</view>

					<view class="form-section">
						<text class="section-title">学生信息</text>

						<up-form-item label="姓名" prop="name" borderBottom ref="name">
							<up-input
								v-model="form.name"
								border="none"
								readonly
								placeholder="请选择学生"
								customStyle="color: #333; font-size: 30rpx;"
							>
								<template #suffix>
									<up-button
										type="primary"
										size="mini"
										@click="handlerToSelectBind"
										customStyle="background: linear-gradient(135deg, #6FD719 0%, #5BC016 100%); border: none; border-radius: 15rpx;"
									>
										快速选择
									</up-button>
								</template>
							</up-input>
						</up-form-item>

						<up-form-item label="学号" prop="studentId" borderBottom ref="studentId">
							<up-input
								v-model="form.studentId"
								border="none"
								readonly
								placeholder="自动获取"
								customStyle="color: #333; font-size: 30rpx;"
							></up-input>
						</up-form-item>
					</view>

					<view class="form-actions">
						<up-button
							type="primary"
							size="large"
							@click="handlerAdd"
							customStyle="background: linear-gradient(135deg, #6FD719 0%, #5BC016 100%); border: none; border-radius: 25rpx; box-shadow: 0 4px 16px rgba(111, 215, 25, 0.3);"
						>
							<up-icon name="checkmark" color="#fff" size="16" style="margin-right: 8rpx;"></up-icon>
							<text style="color: #fff; font-weight: 600;">确认添加</text>
						</up-button>
					</view>
				</up-form>
			</view>
		</view>

		<!-- 选择器 -->
		<up-picker
			title="选择学校"
			ref="schoolPickerRef"
			:show="data.showSchool"
			:columns="data.schoolList"
			keyName="schoolName"
			@confirm="handlerSchoolSelect"
			@cancel="data.showSchool = false"
		></up-picker>

		<up-picker
			title="选择年级"
			:show="data.showGrad"
			:columns="data.gradList"
			keyName="gradeName"
			@confirm="handlerGradSelect"
			@cancel="data.showGrad = false"
		></up-picker>

		<up-picker
			title="选择班级"
			:show="data.showClasses"
			:columns="data.classesList"
			keyName="classesName"
			@confirm="handlerClassesSelect"
			@cancel="data.showClasses = false"
		></up-picker>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		listSchool,
		listGrade,
		listClasses
	} from '../../api/login';
	import {
		createStudent
	} from '../../api/student';
	const schoolPickerRef = ref();
	const data = reactive({
		showSchool: false,
		schoolList: [],
		showGrad: false,
		gradList: [],
		showClasses: false,
		classesList: []
	})
	const form1 = ref();


	const form = ref({
		schoolId: '',
		schoolName: '',
		gradeId: '',
		gradeName: '',
		classesId: '',
		classesName: '',
		studentId: '',
		name: '',
		parentId: ''
	})

	const handlerAdd = async () => {
		const userInfo = uni.getStorageSync("userInfo")
		form1.value.validate().then(async (resp)=>{
			if(resp){
				form.value.parentId = userInfo.id;
				await createStudent(form.value);
				uni.showToast({
							title: '绑定成功',
							icon: 'none',
							duration: 2000
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
				
			}
		})
		
	}

	const rules = {
		schoolName: {
			type: 'string',
			required: true,
			message: '请选择学校',
			trigger: ['blur', 'change'],
		},
		gradeName: {
			type: 'string',
			required: true,
			message: '请选择年级',
			trigger: ['blur', 'change'],
		},
		classesName: {
			type: 'string',
			required: true,
			message: '请选择班级',
			trigger: ['blur', 'change'],
		},
		name: {
			type: 'string',
			required: true,
			message: '请选择学生',
			trigger: ['blur', 'change'],
		}
	}

	const handlerShowSchool = async () => {
		const resp = await listSchool()
		data.schoolList = [resp];
		data.showSchool = true;
	}

	const handlerSchoolSelect = async (item) => {
		form.value.schoolId = item.value[0].id
		form.value.schoolName = item.value[0].schoolName
		form.value.gradeId = null;
		form.value.gradeName = null;
		form.value.classesId = null;
		form.value.classesName = null;
		const resp = await listGrade({
			schoolId: item.value[0].id
		})
		data.gradList = [resp];
		data.showSchool = false;
	}

	const handlerGradSelect = async (item) => {
		form.value.gradeId = item.value[0].id
		form.value.gradeName = item.value[0].gradeName
		form.value.classesId = null;
		form.value.classesName = null;
		const resp = await listClasses({
			schoolId: form.value.schoolId,
			gradeId: item.value[0].id
		})
		data.classesList = [resp];
		data.showGrad = false;
	}

	const handlerClassesSelect = async (item) => {
		form.value.classesId = item.value[0].id
		form.value.classesName = item.value[0].classesName
		data.showClasses = false;
	}
	
	const handlerToSelectBind = ()=>{
		if(form.value.schoolId && form.value.gradeId && form.value.classesId){
			const params = {
				schoolId: form.value.schoolId,
				gradeId: form.value.gradeId,
				classesId: form.value.classesId
			};
			const query = Object.keys(params)
				.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
				.join('&');
			uni.navigateTo({
				url: `/pages/selectStudent/selectStudent?${query}`
			});
			return;
		}
		uni.showToast({
			icon:'error',
			title:'请先选择学校、年级、班级'
		});
	}
</script>

<style lang="scss" scoped>
	.page-container {
		background: linear-gradient(180deg, #F8FAFB 0%, #FFFFFF 100%);
		min-height: 100vh;
		padding-bottom: 40rpx;
	}

	/* 页面标题 */
	.page-header {
		background: linear-gradient(135deg, #6FD719 0%, #5BC016 100%);
		padding: 60rpx 30rpx 40rpx;
		border-radius: 0 0 40rpx 40rpx;
		box-shadow: 0 4px 20px rgba(111, 215, 25, 0.2);
		position: relative;
		overflow: hidden;
	}

	.page-header::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
		pointer-events: none;
	}

	.header-content {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.header-icon {
		font-size: 48rpx;
		width: 80rpx;
		height: 80rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header-text {
		flex: 1;
	}

	.header-title {
		display: block;
		font-size: 36rpx;
		font-weight: 600;
		color: #FFFFFF;
		margin-bottom: 8rpx;
	}

	.header-subtitle {
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	/* 表单容器 */
	.form-container {
		padding: 40rpx 30rpx;
	}

	.form-card {
		background: linear-gradient(135deg, #FFFFFF 0%, #FAFBFC 100%);
		border-radius: 30rpx;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
		border: 1px solid rgba(255, 255, 255, 0.8);
		overflow: hidden;
	}

	.form-header {
		display: flex;
		align-items: center;
		gap: 12rpx;
		padding: 40rpx 30rpx 20rpx;
		border-bottom: 2rpx solid #F5F7FA;
	}

	.form-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	/* 表单区域 */
	.form-section {
		padding: 30rpx 0;
		border-bottom: 1px solid #F5F7FA;

		&:last-child {
			border-bottom: none;
		}
	}

	.section-title {
		display: block;
		font-size: 28rpx;
		font-weight: 600;
		color: #666;
		margin: 0 30rpx 20rpx;
		padding-left: 20rpx;
		border-left: 4rpx solid #6FD719;
	}

	/* 表单项样式重写 */
	:deep(.up-form-item) {
		padding: 20rpx 30rpx;
		background: transparent;

		.up-form-item__body {
			padding: 20rpx 0;
		}

		.up-form-item__body__left__content__label {
			font-size: 30rpx;
			color: #333;
			font-weight: 500;
		}

		.up-input {
			background: rgba(111, 215, 25, 0.03);
			border-radius: 15rpx;
			padding: 0 20rpx;
		}

		&:active {
			background: rgba(111, 215, 25, 0.02);
		}
	}

	/* 表单操作区域 */
	.form-actions {
		padding: 40rpx 30rpx;
	}

	/* 动画效果 */
	.form-card {
		animation: fadeInUp 0.6s ease-out;
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(30rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* 响应式设计 */
	@media screen and (max-width: 750rpx) {
		.form-container {
			padding: 30rpx 20rpx;
		}

		.form-header {
			padding: 30rpx 20rpx 15rpx;
		}

		.section-title {
			margin: 0 20rpx 15rpx;
		}

		:deep(.up-form-item) {
			padding: 15rpx 20rpx;
		}

		.form-actions {
			padding: 30rpx 20rpx;
		}
	}
</style>